<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>示例demo</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
</body>
<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).extend({
        layuiTableColumnEdit:'js/layuiTableColumnEdit'
    }).use(['table','layuiTableColumnEdit','layer'], function () {
        var table = layui.table,layer = layui.layer;
        var layuiTableColumnEdit = layui.layuiTableColumnEdit;
        var $ = layui.$;
        var selectParams = [
            {name:1,value:"张三1"},
            {name:2,value:"张三2"},
            {name:3,value:"张三3"},
            {name:4,value:"张三4"},
            {name:5,value:"张三5"}
        ];
        table.render({
            elem: '#tableId'
            ,id:'id'
            ,url:'tableData.json'
            ,height: 'full-90'
            ,page: true
            ,cols: [[
                {type:'checkbox'}
                ,{field:'name',title: 'table输入框',width:120}
                ,{field:'age', title: 'table点击事件',width:120,sort:'true'}
                ,{field:'state', title: 'ajax传参',width:120,event:'state'}
                ,{field:'test', title: '数组传参',width:120,event:'test',sort:'true'}
            ]],
            done:function (res, curr, count) {
            }
        });
        table.on('tool(tableEvent)', function(obj){
            if(obj.event === 'state'){
                var td = $(obj.tr).find("td[data-field='state']")[0];
                $.getJSON('selectData.json',{},function (result) {
                    layuiTableColumnEdit.createSelect({
                        data:result.data,
                        element:td,
                        //enabled:true,//true：开启多选，false：单选。默认为false
                        callback:function (obj1) {
                            console.log(obj1.select); //下拉选项数据
                            console.log(obj1.td); //当前单元格（td）DOM元素
                            obj.update({state: parseInt(obj1.select.name)});
                            //把选择的显示数据更新到单元格中显示
                            layuiTableColumnEdit.update({element:td,value:obj1.select.value});
                        }
                    });
                });
            }else if(obj.event === 'test'){
                var testTd = $(obj.tr).find("td[data-field='test']")[0];
                layuiTableColumnEdit.createSelect({
                    element: this,
                    data: selectParams,
                    callback: function (obj2) {
                        console.log(obj2.select); //下拉选项数据
                        console.log(obj2.td); //当前单元格（td）DOM元素
                        //把选择的数据更新到行数据中
                        obj.update({test: parseInt(obj2.select.name)});
                        //把选择的显示数据更新到单元格中显示
                        layuiTableColumnEdit.update({element:testTd,value:obj2.select.value});
                    }
                });
            }
        });
    });
</script>
</html>